<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="banner">
      <el-carousel indicator-position="outside" height="480px">
        <el-carousel-item v-for="item in banner.panelContents" :key="item.id" >
          <el-image class="img1" :src="'http://127.0.0.1:8000/' +item.goods_Recomimg" alt="" @click.prevent="productDetail(item.id)" ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="activity-panel">
      <el-row>
        <el-col class="content" :span="8" v-for="(item, index) in activityList" :key="item.id">
          <el-card :body-style="{ padding: '0px', height: '200px' }">
            <img :src="item.img" class="i">
            <a class="cover-link" @click="changGoods(index)"></a>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div>
      <section class="w mt30 clearfix">
        <m-shelf title="猜您喜欢" >
          <div slot="content" class="floors">
            <mall-goods v-for="(o, i) in mayLike" :key="i" :goods='o'></mall-goods>
          </div>
        </m-shelf>
      </section>
    </div>

    <div v-for="item in homeList" :key='item.id'>
      <!-- 热门商品 -->
      <section class="w mt30 clearfix" v-if="item.type === 1">
        <m-shelf :title="item.name" >
          <div slot="content" class="hot">
            <mall-goods v-for="(o, i) in item.panelContents" :key="i" :goods='o'></mall-goods>
          </div>
        </m-shelf>
      </section>
      
      <section class="w mt30 clearfix" v-if="item.type === 2">
        <m-shelf :title="item.name">
          <div slot="content" class="floors">
            <div class="imgbanner" @click="productDetail(imgbannerList[item.index].id)">
              <img :src="imgbannerList[item.index].img" alt="">
              <a class="cover-link"></a>
            </div>
            <mall-goods v-for="(o, i) in item.panelContents" :key="i" :goods='o'></mall-goods>
          </div>
        </m-shelf>
      </section>
    </div>

    <div class="activity-panel">
      <el-row>
        <el-col class="content" :span="8" v-for="(item, index) in activityList" :key="item.id">
          <el-card :body-style="{ padding: '0px', height: '200px' }">
            <img :src="item.img" class="i">
            <a class="cover-link" @click="changGoods(index)"></a>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getHomeInfo, getMayLikeGoods } from '../../api/goods'
import { mapState, mapMutations } from 'vuex'

import MShelf from '../../components/shelf.vue'
import MallGoods from '../../components/MallGoods.vue'
export default {
  name: 'Home',
  data() {
    return {
      // 首页轮播图数据列表
      banner: [],
      // 首页数据列表
      homeList: [],
      // 猜您喜欢
      mayLike: [],
      // 各模块的推荐大图
      imgbannerList: [
        {id:1, img:"https://resource.smartisan.com/resource/1/1220858shoujilouceng.jpg"},
        {id:1, img:"https://resource.smartisan.com/resource/z/zhoubianshangpin1220858web.jpg"},
        {id:1, img:"https://resource.smartisan.com/resource/a/acillouceng1220856.jpg"}
      ],
      // 活动模块的数据列表
      activityList: [
        {
          img: 'https://resource.smartisan.com/resource/6/610400xinpinpeijian.jpg'
        },
        {
          img: 'https://resource.smartisan.com/resource/6/610400yijiuhuanxin.jpg'
        },
        {
          img: 'https://resource.smartisan.com/resource/4/489673079577637073.png'
        },
        {
          img: 'https://resource.smartisan.com/resource/fe6ab43348a43152b4001b4454d206ac.jpg'
        }
      ]
    }
  },
  async created() {
    this.getHomeList()
  },
  methods: {
    ...mapMutations(['SHOWCOM', 'ISLOGIN']),
    async getHomeList() {
      const { data: res } = await getHomeInfo()
      const { data: res2 } = await getMayLikeGoods()
      if (res.code !== 0 || res2.code !== 0) {
        return this.$message.error('获取商品列表失败！')
      }
      
      this.banner = res.result.find(item => item.type === 0)
      // console.log(this.banner)
      this.homeList = res.result
      this.mayLike = res2.result.list
      // console.log(this.homeList)      
    },
    productDetail(id) {
      this.$router.push( `/goodsDetail/${id}`)
    },
    changGoods (v) {
      if (v === 0) {
        this.$router.push({
          path: '/goods?type=1'
        })
      } else if (v === 1) {
        this.$router.push({
          path: '/goods'
        })
      } else if (v === 2) {
        this.$router.push({
          path: '/goods?type=6'
        })
      } else if (v === 3) {
        this.$router.push({
          path: '/goods?type=6'
        })
      }
    },
  },
  components:{
    MShelf,
    MallGoods
  }
}

</script>

<style lang="scss" scoped>
@import "../../assets/style/mixin";
@import "../../assets/style/theme";

  .home {
    display: flex;
    flex-direction: column;
  }

  .no-info {
    padding: 100px 0;
    text-align: center;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    .no-data{
      align-self: center;
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .page { 
    position: absolute; 
    width: 100%;
    top: 470px;
    z-index: 30; 
    .dots {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .dot-active { 
        display: inline-block; 
        width: 15px; 
        height: 15px; 
        background-color: whitesmoke; 
        border-radius: 8px; 
        margin-right: 10px; 
        cursor: pointer; 
      }
      .dot { 
        opacity: 0.2; 
      }
    }
  }

  .activity-panel {
    width: 1220px;
    margin: 0 auto;
    .content {
      float: left;
      position: relative;
      box-sizing: border-box;
      width: 25%;
      height: 200px;
      text-align: center;
    }
    .content ::before{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      content: "";
      pointer-events: none;
    }
    .i {
      width: 305px;
      height: 200px;
    }
    .cover-link {
      cursor: pointer;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 4;
    }
    a {
      color: #5079d9;
      cursor: pointer;
      transition: all .15s ease-out;
      text-decoration: none;
    }
    a:hover {
      box-shadow: inset 0 0 38px rgba(0,0,0,.08);
      transition: all .15s ease;
    }
  }

  .banner, .banner span, .banner div {
    font-family: "Microsoft YaHei";
    transition: all .3s;
    transition-timing-function: linear;
  }

  .banner {
    cursor: pointer;
    perspective: 3000px;
    position: relative;
    z-index: 19;
    margin: 0 auto;
    margin-top: 15px;
    width: 1220px;
  }

  .bg {
    position: relative;
    width: 1220px;
    height: 500px;
    margin: 20px auto;
    background-size: 100% 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: rotateY(0deg) rotateX(0deg);
    & div{
      position: relative;
      height: 100%;
      width: 100%;
    }
  }

  .img1 {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 10px;
  }

  .img2 {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 5px;
    left: 0;
    background-size: 95% 100%;
    border-radius: 10px;
  }

  .img3 {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 10px;
  }

  .a {
    z-index: 20;
    transform: translateZ(40px);
  }

  .b {
    z-index: 20;
    transform: translateZ(30px);
  }

  .c {
    transform: translateZ(0px);
  }

  .sk_item {
    width: 170px;
    height: 225px;
    padding: 0 14px 0 15px;
    > div {
      width: 100%;
    }
    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all .3s;
      &:hover {
        transform: translateY(-5px);
      }
    }
    img {
      width: 130px;
      height: 130px;
      margin: 17px 0;
    }
    .sk_item_name {
      color: #999;
      display: block;
      max-width: 100%;
      _width: 100%;
      overflow: hidden;
      font-size: 12px;
      text-align: left;
      height: 32px;
      line-height: 16px;
      word-wrap: break-word;
      word-break: break-all;
    }
    .sk_item_price {
      padding: 3px 0;
      height: 25px;
    }
    .price_new {
      font-size: 18px;
      font-weight: 700;
      margin-right: 8px;
      color: #f10214;
    }
    .price_origin {
      color: #999;
      font-size: 12px;
    }
  }

  .box {
    overflow: hidden;
    position: relative;
    z-index: 0;
    margin-top: 29px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);

  }

  ul.box {
    display: flex;
    li {
      flex: 1;
      img {
        display: block;
        width: 305px;
        height: 200px;
      }
    }
  }

  .mt30 {
    margin-top: 30px;
  }

  .hot {
    display: flex;
    > div {
      flex: 1;
      width: 25%;
    }
  }

  .floors {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .imgbanner {
      width: 50%;
      height: 380px;
      &:hover {
        cursor: pointer; 
        box-shadow: inset 0 0 38px rgba(0,0,0,.08);
        transition: all .15s ease;
      }
    }
    
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

</style>